<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>任务列表</title>

    <!-- Bootstrap -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

   <!-- 实现以下几个功能
    1.全选全不选
     2.当没选中时，点击手动完成之类会alert("请至少选择一个选项")[弹出的不是alert框而是一个对话框]
    3.选中后，将选中的id添加到数组中
      没选中时，将没选中的id从数组中清除
     4.增加点击一行，就选中此行的checkbox
     5.弹出的不是alert框而是一个对话框[学完js以及jquery，vue后来改善此问题]
    -->

    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
    <script type="text/javascript">
        var xuanz=[];
        $(function () {
            /*多点击一次复选框，复位*/
            $(".ss").click(function () {
                if($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else{
                    $(this).prop("checked",true);
                }
            });
            $("#sel").click(function () {
                if($(this).prop("checked")){
                    $(this).prop("checked",false);
                }else{
                    $(this).prop("checked",true);
                }
            });
            /*点击内容行*/
                $(".hang2").click(function () {
                    var kg = $(this).children().children().prop("checked");
                    /*如果没被选中*/
                    /*让其被选中，添加到数组中*/
                    if (!kg) {
                        $(this).children().children().prop("checked", true);
                        xuanz.push($(this).children().children().val());
                    } else {
                        /*被选中*/
                        /*让其不被选中，从数组中删除*/
                        var index = xuanz.indexOf($(this).children().children().val());
                        //alert(index);
                        if (index > -1) {
                            xuanz.splice(index, 1);
                            //alert(xuanz);
                        }
                        $(this).children().children().prop("checked", false);
                    }

                });
                /*1.全选全不选,以行来选择*/
                /*[难点：很难判断是点击了行还是复选框]*/
                $(".hang1").click(function () {
                    var ret1 = $(this).children().children().prop("checked");
                    /*如果标题项没被选中*/
                    /*标记为选中，并且将数据全部存放入数组中*/
                    if (!ret1) {
                        $(this).children().children().prop("checked", true);
                        $(".hang2").each(function (i) {
                            var t = $(this).children().children().prop("checked");
                            /*如果内容项没有被选中*/
                            /*标记为选中*//*将每一项的值存放至数组*/
                            if (!t) {
                                $(this).children().children().prop("checked", true);
                                xuanz.push($(this).children().children().val());
                            } else {
                                /*内容被选中，则暂不做任何操作*/
                            }
                        });
                    } else {
                        /*标记为未选中,并清空数组*/
                        $(this).children().children().prop("checked", false);
                        $(".hang2").each(function (i) {
                            var t = $(this).children().children().prop("checked");
                            $(this).children().children().prop("checked", false);
                        });
                        xuanz = [];
                    }
                });

            /*2.当没选中时，点击手动完成之类会alert("请至少选择一个选项")*/
            /*手动完成*/
            $("#w1").click(function () {
                var a=0;
                $(".ss").each(function (i) {
                    var r=$(this).prop("checked");
                    if(r){
                        a++;
                        //此处用ajax完成(之后用ajax完成，先用重定向完成)/*+"&page="+*/
                        $("#w1").prop("href","/manual?ids="+xuanz);
                        return false;
                    }
                });
                if(a==0){
                    var con;
                    con=confirm( "你喜欢玫瑰花么?" ); //在页面上弹出对话框
                    if (con== true )alert( "非常喜欢!" );
                    else alert( "不喜欢!" );
                    alert("请至少选择一个选项");
                }
            });
            /*手动失败*/
            $("#w2").click(function () {
                var a=0;
                $(".ss").each(function (i) {
                    var r=$(this).prop("checked");
                    if(r){
                        a++;
                        //此处用ajax完成
                        $("#w2").prop("href","/fail?ids="+xuanz);
                        return false;
                    }
                });
                if(a==0){
                    var name,age;
                    name=prompt( "请问你叫什么名字?" ); /*在页面上弹出提示对话框，
                        将用户输入的结果赋给变量name*/
                    alert(name); //输出用户输入的信息
                    age=prompt( "你今年多大了?" , "请在这里输入年龄" ); /*在页面上再一次弹出提示对话框，
                        讲用户输入的信息赋给变量age*/
                    alert(age) //输出用户输入的信息
                    alert("请至少选择一个选项");
                }
            });
            /*整条重发*/
            $("#w3").click(function () {
                var a=0;
                $(".ss").each(function (i) {
                    var r=$(this).prop("checked");
                    if(r){
                        a++;
                        //此处用ajax完成
                        $("#w3").prop("href","/win/index?id="+$(this).val());//此处传递数组
                        return false;
                    }
                });
                if(a==0){
                    alert("请至少选择一个选项");
                }
            });
            /*卸货重发*/
            $("#w4").click(function () {
                var a=0;
                $(".ss").each(function (i) {
                    var r=$(this).prop("checked");
                    if(r){
                        a++;
                        //此处用ajax完成
                        $("#w4").prop("href","/win/index?id="+$(this).val());//此处传递数组
                        return false;
                    }
                });
                if(a==0){
                    alert("请至少选择一个选项");
                }
            });

            /*4.页码条,当前所在页没有前一页则<<不可点击,当前所在页没有后一页则>>不可点击*/
            $("#page-pre").hover(function () {
                if($("#page-pre").val()==0){
                    $("#page-pre").prop("class","disabled");
                }else{
                    $("#page-pre").click(function () {
                        $("#a1").prop("href","/show?page="+$("#page-pre").val());
                    });
                }
            });

            $("#page-next").hover(function () {
                if($("#page-next").val()==0){
                    $("#page-next").prop("class","disabled");
                }else{
                    $("#page-next").click(function () {
                        $("#a2").prop("href","/show?page="+$("#page-next").val());
                    });
                }
            });
            /*更改显示的值*/
            window.onload=function(){
                $(".s1").each(function () {
                    if ($(this).text()==38){
                        /*改变文本的内容*/
                        $(this).text("任务完成");
                    }else if ($(this).text()==39){
                        $(this).text("任务失败");
                    }
                });
            }
        });
    </script>
</head>
<body>
<!--导航条-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" th:href="@{/show}" >刷新</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a id="w1" href="">手动完成<span class="sr-only">(current)</span></a></li>
                <li><a id="w2" href="">手动失败</a></li>
                <li><a id="w3" href="">整条重发</a></li>
                <li><a id="w4" href="">卸货重发</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户名 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!--任务表格-->
<table class="table table-hover">
    <tr class="hang1">
        <th>
            <input id="sel" type="checkbox" onclick="">
        </th>
        <th>申请编号</th>
        <th>任务号</th>
        <th>任务起点</th>
        <th>任务终点</th>
        <th>起点层数</th>
        <th>终点层数</th>
        <th>任务状态</th>
        <th>申请时间</th>
        <th>完成时间</th>
        <th>车辆名称</th>
    </tr>
    <tr th:each="task:${pageInfo.list}" class="hang2" ><!--用遍历循环实现-->
        <td>
            <input id="s1" type="checkbox"  th:value="${task.id}"  class="ss">
        </td>
        <td th:text="${task.id}"></td>
        <td th:text="${task.task_No}"></td>
        <td th:text="${task.stationFrom}"></td>
        <td th:text="${task.stationTo}"></td>
        <td th:text="${task.fromPar}"></td>
        <td th:text="${task.toPar}"></td>
        <td th:text="${task.status}" class="s1"></td><!--th:text="${task.status}"-->
        <td th:text="${#dates.format(task.issuedTime,'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${#dates.format(task.finishTime,'yyyy-MM-dd HH:mm:ss')}"></td>
        <td th:text="${task.vehicleId}"></td>
    </tr>
</table>
<!--页码条th:href="'/show?page='+${pageInfo.prePage}"disabled-->
<nav aria-label="Page navigation">
    <ul class="pagination">
        <li  id="page-pre" th:value="${pageInfo.prePage}">
            <a href=""  aria-label="Previous" id="a1">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <!--以下用遍历实现--><!--navigatepageNums-->
        <li th:each="pageNum:${pageInfo.navigatepageNums}"><a th:href="'/show?page='+${pageNum}">[[${pageNum}]]</a></li>
        <li id="page-next" th:value="${pageInfo.nextPage}">
            <a href="" aria-label="Next" id="a2">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>
</body>
</html>